<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		td{
			text-align: center;
		}
	</style>
	<script type="text/javascript">
	window.onload=function(){
		var oTable = document.getElementById('table');
        var oButton = document.getElementById('button');
        var oName = document.getElementById('name');
        var oAge = document.getElementById('age');
        
        var n=oTable.tBodies[0].rows.length+1;

        oButton.onclick=function(){
           
           var oTr=document.createElement('tr');

           var oTd=document.createElement('td');
           oTd.innerHTML=n++;
           oTr.appendChild(oTd);

           var oTd=document.createElement('td');
           oTd.innerHTML=oName.value;
           oTr.appendChild(oTd);

           var oTd=document.createElement('td');
           oTd.innerHTML=oAge.value;
           oTr.appendChild(oTd);      

           var oTd=document.createElement('td');
           oTd.innerHTML='<a href="javascript:;">删除</a>';
           oTr.appendChild(oTd);  

           var aA=document.getElementsByTagName('a');
          
           //存在一个未解决的BUG。无法删除最后一条
           //存在一个未解决的BUG。必须要先添加一行，才能删除默认的行
           for (var i = 0; i < aA.length; i++) {
	           aA[i].onclick=function(){
                  console.log(i+"<"+aA.length);
	              oTable.tBodies[0].removeChild(this.parentNode.parentNode);
	           }
           }
    


         oTable.tBodies[0].appendChild(oTr);

        };



        //搜索
        var oSearch=document.getElementById('search');
        oSearch.onclick=function(){
	       for (var i = 0 ; i < oTable.tBodies[0].rows.length ; i++) {
	        	
	        	if (oTable.tBodies[0].rows[i].cells[1].innerHTML == oName.value) {
	        		oTable.tBodies[0].rows[i].style.background='red';
	        	}else{
	        		oTable.tBodies[0].rows[i].style.background='';
	        	}

	        };

        };
 
	};
	</script>
</head>
<body>
	姓名：<input type="text" id="name">
	年龄：<input type="text" id="age">
	<input type="button" id="button" value="添加">
	<input type="button" id="search" value="搜索">
	<table id="table" border='1' width="500">
		<thead>
			<tr>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>15</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>12</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>54</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>4</td>
				<td>赵六</td>
				<td>19</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>5</td>
				<td>孙七</td>
				<td>26</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>6</td>
				<td>周八</td>
				<td>29</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
			<tr>
				<td>7</td>
				<td>吴九</td>
				<td>25</td>
				<td><a href="javascript:;">删除</a></td>
			</tr>
		</tbody>
	</table>
</body>
</html>